import './styles/fonts.css'
import './styles/vars.css'
import './styles/base.css'
import './styles/icons.css'
import './styles/utils.css'
import './styles/components/custom-block.css'
import './styles/components/vp-code.css'
import './styles/components/vp-code-group.css'
import './styles/components/vp-doc.css'
import './styles/components/vp-sponsor.css'
import './styles/mine.scss'

import type { Component } from 'vue'
import { Awaitable, EnhanceAppContext, Theme } from 'vitepress'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import VPBadge from './components/common/VPBadge.vue'
import VPImage from './components/common/VPImage.vue'
import VPButton from './components/common/VPButton.vue'
import VPDemo from './components/demo/vp-demo.vue'
import Layout from './Layout.vue'

export const globals: [string, Component][] = [
    ['Demo', VPDemo],
    ['VPBadge', VPBadge],
    ['VPImage', VPImage],
    ['VPButton', VPButton],
]

const defineVP = (done: (value: EnhanceAppContext) => Awaitable<void>): Theme => {
    return {
        Layout: Layout,
        async enhanceApp({ app, router, siteData }) {
            app.use(ElementPlus as any)
        
            // 注册自定义全局组件
            globals.forEach(([name, Comp]) => {
                app.component(name, Comp as any)
            })
            
            await done({ app, router, siteData });
        }
    }
}

export default defineVP;
